import { useDispatch, useSelector } from 'react-redux';
import { toggleAll } from '../store/actions/todos';

import { TodoItem } from './TodoItem';

export const TodoMain = () => {
  // hooks
  const dispatch = useDispatch();

  // 获取tods列表数据
  const list = useSelector((state) => state.todos);
  // console.log(list);
  const isCheckAll = list.every((item) => item.done);

  // 全部选中反选事件处理函数
  const handleToggleAll = () => {
    console.log('发送 action', !isCheckAll);
    dispatch(toggleAll(!isCheckAll));
  };

  return (
    <section className="main">
      <input
        id="toggle-all"
        className="toggle-all"
        type="checkbox"
        checked={isCheckAll}
        onChange={handleToggleAll}
      />
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        {list.map((item) => (
          <TodoItem key={item.id} {...item} />
          // <TodoItem key={item.id} {...item} === id={item.id} text={item.text} done={item.done} />
        ))}
      </ul>
    </section>
  );
};
